<template>
  <KView class="home-classify">
    <template v-for="(cols,index) in menus">
      <KFlex :key="`row_${index}`" class="home-classify-row">
        <KFlexItem v-for="(menu,menuIndex) in cols" :key="menu?menu.id:`menu_${menuIndex}`">
          <KView v-if="menu!==null" class="home-classify-item" @click="menuClick(menu)">
            <KView class="home-classify-item-image">
              <img class="sys-img" :src="menu.icon" mode="aspectFit">
            </KView>
            <KView class="home-classify-item-text">
              <span>{{menu.label}}</span>
            </KView>
          </KView>
        </KFlexItem>
      </KFlex>
    </template>
  </KView>
</template>

<script>
  import GlobalData from 'utils/globalData';

  export default {
    props: {
      classifyList: {
        type: Array,
        required: true
      }
    },

    data() {
      return {
        menus: this.getMenus()
      };
    },

    methods: {
      getMenus() {
        let classifyList = this.classifyList;
        let data = [{
          label: '水果生鲜',
          id: 'freshFruit',
          path: '/classify?typeId=1',
          hasNav: false
        }, {
          label: '发现美食',
          id: 'findFood',
          path: '/classify?typeId=2',
          hasNav: false
        }, {
          label: '母婴用品',
          id: 'maternalInfant',
          path: '/classify?typeId=3',
          hasNav: false
        }, {
          label: '生活娱乐',
          id: 'lifeEntertainment',
          path: '/classify?typeId=4',
          hasNav: false
        }, {
          label: '洗车服务',
          id: 'carWash',
          path: '/classify?typeId=5',
          hasNav: false
        }, {
          label: '一元拍卖',
          id: 'oneAuction',
          path: '/oneAuction',
          hasNav: true
        }, {
          label: '拼团砍价',
          id: 'groupBargain',
          path: '/groupBargain',
          hasNav: true
        }, {
          label: '积分商城',
          id: 'integralMall',
          path: '',
          hasNav: true
        }];
        data = data.filter(obj => classifyList.indexOf(obj.id) !== -1);

        let menus = [];
        let menuImg = GlobalData.images.homeMenuImg;
        let colNum = 4;
        let rowNum = data.length / 4;
        rowNum = Math.ceil(Math.round(rowNum * 100) / 100);
        for (let i = 0; i < rowNum; i++) {
          let arr = [];
          for (let j = 0; j < colNum; j++) {
            let obj = data[i * colNum + j];
            if (obj === undefined) {
              arr.push(null);
            } else {
              let id = obj.id;
              let imgUrl = menuImg[id];
              obj.icon = imgUrl;
              arr.push(obj);
            }
          }
          menus.push(arr);
        }
        return menus;
      },

      menuClick(menu) {
        this.$emit('menu-click', menu);
      }
    }
  };

</script>

<style lang="scss">
  .home-classify {
    .home-classify-row {
      margin-bottom: formatPx(30);

      &:last-child {
        margin-bottom: 0;
      }
    }

    .home-classify-item {
      height: formatPx(145);
      width: formatPx(115);
      margin: auto;

      .home-classify-item-image {
        height: formatPx(94);
      }

      .home-classify-item-text {
        margin-top: formatPx(15);
        font-size: formatPx(26);
        text-align: center;
        color: #2f3135;
      }
    }
  }

</style>
